<template>
  <div class="wrapper">
    <el-card class="box-card" style="width: 400px;margin: 130px auto">
      <el-menu
          :default-active="currentPathName"
          :router=true
          class="el-menu-demo"
          mode="horizontal"
          style="margin: 0 0 20px 0">
        <el-menu-item index="/login">登录</el-menu-item>
        <el-menu-item index="/register">注册</el-menu-item>
      </el-menu>
      <el-main>
        <router-view/>
      </el-main>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      checked: false,
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {min: 5, max: 10, message: "长度在 5 到 10 个字符之间", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 5, max: 12, message: "长度在 5 到 12 个字符之间", trigger: "blur"},
        ],
      },
    };
  },
  mounted() {
    if (localStorage.getItem("news")) {
      this.form = JSON.parse(localStorage.getItem("news"))
      this.checked = true
    }
  },
  computed: {
    currentPathName() {
      return this.$route.path
    }
  },
  methods: {
    login() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {  //表单校验合法
          this.rq.post("/user/login", this.user).then(res => {
            if (res.code === '200') {
              localStorage.setItem("user", JSON.stringify(res.data));  //存储用户信息到浏览器
              this.$message.success("登录成功")
              this.$router.push("/")  //
            } else {
              // setToken(res.data.token)
              // localStorage.setItem("USERNAME", res.data.username)
              this.$message.error("用户名或密码错误")
            }
          }).catch((err) => {
            this.$message.error("未知错误")
          })
        }
      })
    },
    forget_passwd() {
      this.$message.info("功能尚未开发额😥")
    },
    register() {
      this.$router.push("/register")
    },
  },
}
</script>

<style>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #ffdce7, #b0cfe8);
  overflow: hidden;
}
</style>
